<template>
  <div class="comment">
    <div>
      <h2 class="comment-title">评论</h2>
      <div class="comment-msg">
        <div class="comment-img">
          <img v-if="loginIn" :src="getUrl(avatar)">
        </div>
        <el-input class="comment-input" type="textarea" maxlength="500" :rows="2" placeholder="请输入内容" v-model="textarea"></el-input>
        <el-button type="primary" class="sub-btn" @click="postComment">评论</el-button>
      </div>
    </div>
    <p>精彩评论：共{{commentList.length}}条评论</p>
    <div class="popular" v-for="(item,index) in commentList" :key="index">
      <div class="popular-img">
        <img :src="getUrl(userPic[index])">
      </div>
      <ul class="popular-msg">
        <li class="name">{{userName[index]}}</li>
        <li class="time">{{item.createTime}}</li>
        <li class="content">{{item.content}}</li>
      </ul>
      <div class="up" ref="up" @click="postUp(item.id,index)">
        <i class="iconfont icon-praise01 good"></i>
        <span>{{commentList[index].praise}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {mixin} from '../mixins/index'
import {setComment,getCommentByVideoId,getConsumerOfId,addNumber,commnetPraiseUp,commnetPraiseDown,getPraiseById} from '../api/index'
export default {
  name:'comment',
  mixins:[mixin],
  props:[
    'videoId',   //视频id
  ],
  computed:{
    ...mapGetters([
      'id',
      'loginIn',
      'userId',
      'avatar',
      'commentPraise'
    ])
  },
  data(){
    return {
      textarea:'',   //评论内容
      commentList:[],   //存放评论列表
      userPic:[], 
      userName:[],
    }
  },
  mounted(){
    setTimeout(() => {
      this.getComment()
    }, 500);
  },
  methods:{
    //提交评论
    postComment(){
      if(this.loginIn){
        let params = new URLSearchParams();
        params.append('consumerId',this.userId)
        params.append('videoId',this.videoId)
        params.append('content',this.textarea)
        setComment(params)
        .then(res =>{
          if(res.code == 1){
            this.notify('评论成功','success')
            this.textarea = ''
            this.getComment()
          }else{
            this.notify('评论失败','error')
          }
        }).catch(() =>{
          this.notify('评论失败','error')
        })
      }else{
        this.notify('请先登录','warning')
      }
    },
    //评论列表和赞数
    getComment(){
      getCommentByVideoId(this.videoId)
      .then(res =>{
        this.commentList = res
        for (let i = 0; i < res.length; i++) {
          this.getUsers(res[i].consumerId,i)
          //判断每条评论是否已点赞
          if (this.commentPraise) {
            for (let j = 0; j < this.commentPraise.length; j++) {
              if (this.commentPraise[j] == res[i].id) {
                setTimeout(() => {
                  this.$refs.up[i].children[0].classList.add('good2')
                }, 200);
                continue;
              }
            }
          }
          
        }
      }).catch(() =>{
        this.notify('评论加载失败','error')
      })
    },
    //获取用户头像和昵称
    getUsers(id,i){
      getConsumerOfId(id)
      .then(res =>{
        this.userPic.splice(i,0,res.avatar)
        this.userName.splice(i,0,res.username)
      }).catch(() =>{
        this.notify('出错了','error')
      })
    },
    //给评论点赞或删除
    postUp(commentId,index){
      if(this.loginIn){
        let formData = new FormData()
        formData.append('id',this.userId)
        formData.append('value',commentId)
        formData.append('type',3) //0收藏  1历史  2点赞视频  3点赞评论
        addNumber(formData)
        if (this.$refs.up[index].children[0].classList.contains('good2')) {
          commnetPraiseDown(commentId)
          this.$refs.up[index].children[0].classList.remove('good2')
          this.commentList[index].praise--
        }else{
          commnetPraiseUp(commentId)
          this.$refs.up[index].children[0].classList.add('good2')
          this.commentList[index].praise++
        }

        getPraiseById(this.userId)
          .then(res =>{
            var commentPraise = res.commentIds.split('-')
            this.$store.commit('setCommentPraise',commentPraise)
          })
      }else{
        this.notify('请先登录','warning')
      }
    }
  }
}
</script>

<style scoped>
@import '../assets/css/comment.css';
</style>